﻿<style type="text/css">
    /*聊天界面*/
    .mv-content{margin-top: 0px;padding-bottom:0px;}
    body{background:#efeff3 }
    .chat-interface .cont-detail{clear: both;overflow: hidden;}
    .chat-interface .cont-detail .interface-b{display: block;text-align: center;margin-bottom: 10px}
    .chat-interface .cont-detail .interface-b span{padding: 1px 3px;background:#cecece;color: #fff;border-radius: 5px; }
    .chat-interface .interface-cont .interface-l .interface-tou{width: 35px;height: 35px;display: inline-block;float: left;}
    .chat-interface .interface-l{margin: 10px;overflow: hidden;}
    .chat-interface .interface-l .interface-a{margin-left: 5px;background: #fff;padding:7px;float: left;max-width: 70%;border-radius: 5px;line-height:25px;}
    .chat-interface .interface-l .interface-a img{display: inline-block;vertical-align: middle;}

    /*转账红包*/
    .chat-interface .money-l {float: left;width: 70%;text-align: center;}
    .chat-interface .money-a p ,.money-a span{display: block;text-align: center;color: #fff}
    .chat-interface .money-a{background: #fa8c03;padding: 7px;margin-left: 5px;position: relative;}
    .chat-interface .money-a p{font-size: 25px;}
    .chat-interface .money-a img{display: inline-block;width: 35px;height: 35px;position: absolute;left: 10px;top: 15px;}
    .chat-interface .money-b{background: #fff;margin-left: 5px;text-align: left;padding: 2px 7px;font-size: 14px;}
    .chat-interface .money-r{float: right;width: 70%;margin-right: 5px;}

    .chat-interface .interface-r{float: right;margin:10px;width: 100%}
    .chat-interface .interface-r .interface-a{margin-right:5px;background:#afe56e;padding:7px;float: right;max-width: 70%;border-radius: 5px;line-height:25px;}
    .chat-interface .interface-r .interface-a img{display: inline-block;vertical-align: middle;}

    .chat-interface .interface-a img{height: auto!important;width: auto!important;max-width: 100%!important;}
    .chat-interface .interface-cont .interface-r .interface-tou{width: 35px;height: 35px;display: inline-block;float: right;}
    .chat-interface .interface-bottom{background:#f4f4f6;padding-top: 5px;padding-bottom: 5px;position: fixed;bottom: 0px; width: 100%;}
    .chat-interface .bottom-content{margin-left: 15px;margin-right: 15px;overflow: hidden;}
    .chat-interface .interface-c{width: 10%;float: left;}
    .chat-interface .interface-c img{display: inline-block;width: 30px;height: 30px;margin-top: 5px;}
    .chat-interface .interface-d{width: 61%;height:40px;float: left;margin-left: 4%;}
    .chat-interface .interface-d input{height: 35px;width: 100%;border: none;outline: none;background: #fff;text-indent: 5px;font-size: 15px;margin-top:2px;}
    .chat-interface .interface-e{width: 22%;float: right;text-align: right;}
    .chat-interface .interface-e img{display: inline-block;width: 30px;height: 30px;margin-top: 5px;}
    .chat-interface .interface-e .interface-img2{margin-left: 10px;}
    .chat-interface .interface-e a{padding: 1px 3px;background: #1aac19;color: #fff;font-size: 14px;margin-top: 10px;display: inline-block;}
    .chat-interface .interface-d{width: 78%;margin-left: 0%;}

    /*表情*/
    .interface-icon {padding-top: 20px;}
    .interface-icon img{display: inline-block;margin-left: 15px;margin-bottom: 10px;}

    /*底部功能等*/
    .interface-function{padding-top: 20px;overflow: hidden;}
    .interface-function a{position:relative;}
    .interface-function a input{position: absolute; top: 0; display: block; width: 100%; left: 0; height: 80px;opacity: 0;margin-left: 15px;z-index:99;}
    .interface-function ul li {width: 14.3%;float: left;margin-left: 8%;text-align: center;margin-bottom: 15px;}
    .interface-function ul li a{display: inline-block;background: #fff;border: 1px solid #efeff3;display: block;height: 40px;border-radius: 8px;}
    .interface-function ul li a img{display: inline-block;height: 25px;margin-top: 8px;}
    .interface-function ul li p{margin-top: 5px;font-size: 13px;}
    @media screen and (max-width: 320px) {
        .chat-interface .interface-e{width: 25%;}
        .chat-interface  .interface-e .interface-img2{margin-left: 5px;}
    }
</style>
<div class="mv-chat">
    <div style="height: 50px;"></div>
    <div class="chat-interface">
        <div class="interface-cont">
            <div v-for="data,index in bag.datas" v-cloak="">                
                <!-- 左侧 -->               
                <!-- 文字消息 -->
                <div class="cont-detail" v-if="data.style == 1 && data.sendid == bag.friendid">
                    <div class="interface-l">
                        <p class="interface-b" v-if="index <= 0 || (index > 0 && mview.custom.dateDiff(bag.datas[index].addtime,bag.datas[index-1].addtime) > 10)"><span v-text="mview.custom.timeanalyze(data.addtime)">-</span></p>
                        <!-- 头像 -->
                        <img v-on:click="detail(data.sendid)" class="interface-tou" :src="bag.friendhead">
                        <p class="interface-a" v-html="mview.custom.messageanalyze(data)">-</p>
                    </div>
                </div>                
                <!-- 图片消息 -->
                <div class="cont-detail" v-if="data.style == 2 && data.sendid == bag.friendid">
                    <div class="interface-l">
                        <p class="interface-b" v-if="index <= 0 || (index > 0 && mview.custom.dateDiff(bag.datas[index].addtime,bag.datas[index-1].addtime) > 10)"><span v-text="mview.custom.timeanalyze(data.addtime)">-</span></p>
                        <img v-on:click="detail(data.sendid)" class="interface-tou" :src="bag.friendhead">
                        <p class="interface-a"><img :src="data.content"></p>
                    </div>
                </div>

                <!-- 右侧 -->                
                <!-- 文字消息 -->
                <div class="cont-detail" v-if="data.style == 1 && data.revcid == bag.friendid">
                    <div class="interface-r">
                        <p class="interface-b" v-if="index <= 0 || (index > 0 && mview.custom.dateDiff(bag.datas[index].addtime,bag.datas[index-1].addtime) > 10)"><span v-text="mview.custom.timeanalyze(data.addtime)">-</span></p>
                        <!-- 头像 -->
                        <img v-on:click="detail(data.sendid)" class="interface-tou" :src="bag.head">
                        <p class="interface-a" v-html="mview.custom.messageanalyze(data)">-</p>
                    </div>
                </div>
                <!-- 图片消息 -->
                <div class="cont-detail" v-if="data.style == 2 && data.revcid == bag.friendid">
                    <div class="interface-r">
                        <p class="interface-b" v-if="index <= 0 || (index > 0 && mview.custom.dateDiff(bag.datas[index].addtime,bag.datas[index-1].addtime) > 10)"><span v-text="mview.custom.timeanalyze(data.addtime)">-</span></p>
                        <img v-on:click="detail(data.sendid)" class="interface-tou" :src="bag.head">
                        <p class="interface-a"><img :src="data.content"></p>
                    </div>
                </div>
            </div>
            <div style="height: 70px;"></div>
            <div class="interface-bottom">
                <div class="bottom-content">
                    <!--<div class="interface-c">
                        <img src="/Images/Chat/yuyin.png">
                    </div>-->
                    <div class="interface-d">
                        <input type="text" id="meeesgetext" v-on:keypress="send($event)">
                    </div>
                    <div class="interface-e">
                        <img src="/Images/Chat/xiaolian.png" class="interface-img1" v-on:click="face"><img src="/Images/Chat/jia.png" class="interface-img2" v-on:click="func">
                        <a style="display: none">发送</a>
                    </div>
                </div>
                <!-- 表情 -->
                <div id="faceblock" class="interface-icon" v-if="faceopen" v-cloak="">
                    <img v-on:click="facesend('01')" src="/Images/Chat/i_f01.gif">
                    <img v-on:click="facesend('02')" src="/Images/Chat/i_f02.gif">
                    <img v-on:click="facesend('03')" src="/Images/Chat/i_f03.gif">
                    <img v-on:click="facesend('04')" src="/Images/Chat/i_f04.gif">
                    <img v-on:click="facesend('05')" src="/Images/Chat/i_f05.gif">
                    <img v-on:click="facesend('06')" src="/Images/Chat/i_f06.gif">
                    <img v-on:click="facesend('07')" src="/Images/Chat/i_f07.gif">
                    <img v-on:click="facesend('08')" src="/Images/Chat/i_f08.gif">
                    <img v-on:click="facesend('09')" src="/Images/Chat/i_f09.gif">
                    <img v-on:click="facesend('10')" src="/Images/Chat/i_f10.gif">
                    <img v-on:click="facesend('11')" src="/Images/Chat/i_f11.gif">
                    <img v-on:click="facesend('12')" src="/Images/Chat/i_f12.gif">
                    <img v-on:click="facesend('13')" src="/Images/Chat/i_f13.gif">
                    <img v-on:click="facesend('14')" src="/Images/Chat/i_f14.gif">
                    <img v-on:click="facesend('15')" src="/Images/Chat/i_f15.gif">
                    <img v-on:click="facesend('16')" src="/Images/Chat/i_f16.gif">
                    <img v-on:click="facesend('17')" src="/Images/Chat/i_f17.gif">
                    <img v-on:click="facesend('18')" src="/Images/Chat/i_f18.gif">
                    <img v-on:click="facesend('19')" src="/Images/Chat/i_f19.gif">
                    <img v-on:click="facesend('20')" src="/Images/Chat/i_f20.gif">
                    <img v-on:click="facesend('21')" src="/Images/Chat/i_f21.gif">
                    <img v-on:click="facesend('22')" src="/Images/Chat/i_f22.gif">
                    <img v-on:click="facesend('23')" src="/Images/Chat/i_f23.gif">
                    <img v-on:click="facesend('24')" src="/Images/Chat/i_f24.gif">
                    <img v-on:click="facesend('25')" src="/Images/Chat/i_f25.gif">
                    <img v-on:click="facesend('26')" src="/Images/Chat/i_f26.gif">
                    <img v-on:click="facesend('27')" src="/Images/Chat/i_f27.gif">
                    <img v-on:click="facesend('28')" src="/Images/Chat/i_f28.gif">
                    <img v-on:click="facesend('29')" src="/Images/Chat/i_f29.gif">
                    <img v-on:click="facesend('30')" src="/Images/Chat/i_f30.gif">
                    <img v-on:click="facesend('31')" src="/Images/Chat/i_f31.gif">
                    <img v-on:click="facesend('32')" src="/Images/Chat/i_f32.gif">
                    <img v-on:click="facesend('33')" src="/Images/Chat/i_f33.gif">
                    <img v-on:click="facesend('34')" src="/Images/Chat/i_f34.gif">
                    <img v-on:click="facesend('35')" src="/Images/Chat/i_f35.gif">
                    <img v-on:click="facesend('36')" src="/Images/Chat/i_f36.gif">
                    <img v-on:click="facesend('37')" src="/Images/Chat/i_f37.gif">
                    <img v-on:click="facesend('38')" src="/Images/Chat/i_f38.gif">
                    <img v-on:click="facesend('39')" src="/Images/Chat/i_f39.gif">
                    <img v-on:click="facesend('40')" src="/Images/Chat/i_f40.gif">
                    <img v-on:click="facesend('41')" src="/Images/Chat/i_f41.gif">
                    <img v-on:click="facesend('42')" src="/Images/Chat/i_f42.gif">
                    <img v-on:click="facesend('43')" src="/Images/Chat/i_f43.gif">
                    <img v-on:click="facesend('44')" src="/Images/Chat/i_f44.gif">
                    <img v-on:click="facesend('45')" src="/Images/Chat/i_f45.gif">
                    <img v-on:click="facesend('46')" src="/Images/Chat/i_f46.gif">
                    <img v-on:click="facesend('47')" src="/Images/Chat/i_f47.gif">
                    <img v-on:click="facesend('48')" src="/Images/Chat/i_f48.gif">
                    <img v-on:click="facesend('49')" src="/Images/Chat/i_f49.gif">
                    <img v-on:click="facesend('50')" src="/Images/Chat/i_f50.gif">
                </div>
                <!-- 功能图片等 -->
                <div id="funcopen" class="interface-function" v-if="funcopen" v-cloak="">
                    <ul>
                        <li>
                            <a>
                                <img src="/Images/Chat//xiangce.png">
                                <input id="sendimage" name="sendimage" type="file" v-on:change="imgsend($event)">
                            </a>
                            <p>图片</p>
                        </li>
                        <!--<li onclick="mview.control.tips('未开放',3000)">
                            <a>
                                <img src="/Images/Chat//hongbao.png">
                            </a>
                            <p>红包</p>
                        </li>
                        <li onclick="mview.control.tips('未开放',3000)">
                            <a>
                                <img src="/Images/Chat//weizhi.png">
                            </a>
                            <p>位置</p>
                        </li>
                        <li onclick="mview.control.tips('未开放',3000)">
                            <a>
                                <img src="/Images/Chat//yuyintonghua.png">
                            </a>
                            <p>电话</p>
                        </li>-->
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="height:36px;"></div>
<script type="text/javascript">
    var pagedata = {
        request: {
            method: "VIEW_FRIEND_MESSAGE",
            id: mview.view.chlid.param.id
        },
        screen: {
            header_display: true,
            footer_display: false,
            header_title_name: "-",
            header_exit_name: "返回",
            header_exit_click: function () {
                mview.view.back();
            },
            header_ok_name: '资料',
            header_ok_display: true,
            header_ok_click: function () {
                mview.view.load('/views/module/friend/detail.html', {
                    id: pagedata.request.id
                });
            }
        },
        onpush: function (json) {
            if (json.DataType == "FRIEND_MESSAGE") {
                var data = json.Content;
                //必须是当前聊天对方推送数据
                if (data.sendid == pagedata.data.bag.friendid && data.revcid == pagedata.data.bag.memberid) {
                    pagedata.methods.messagepush(data);
                    return true;
                }
                else {
                    return false;//拒绝处理
                }
            }
            else {
                return false;//拒绝处理
            }
        },
        oncreate: function () {
            mview.vue.header.$data.header_title_name = pagedata.data.bag.friendusername;
            setTimeout(function () {
                window.scrollTo(0, document.documentElement.scrollHeight);
            }, 100);
        },
        onclose: function () {
            window.scrollTo(0, 0);
        },
        data: {
            faceopen: false,
            funcopen: false
        },
        methods: {
            messagepush: function (data) {
                pagedata.data.bag.datas.push(data);
            },
            imgsend: function (event) {
                mview.custom.preview_image(document.getElementById("sendimage"), 800, function (base64) {
                    mview.socket.send({
                        data: {
                            method: "FRIEND_RELATION_SEND",
                            revcid: pagedata.data.bag.friendid,
                            revctype: 1,
                            style: 2,
                            content: base64
                        },
                        success: function (data)
                        {
                            if (data.Code != 0) {
                                mview.control.tips(data.Message);
                            }
                        }
                    });
                    pagedata.methods.messagepush({
                        id: 0,
                        sendid: pagedata.data.bag.memberid,
                        revcid: pagedata.data.bag.friendid,
                        revctype: 1,
                        style: 2,
                        content: base64,
                        addtime: m.date().toFormat("yyyy-MM-dd hh:mm:ss")
                    });
                    pagedata.data.funcopen = false;
                    pagedata.data.faceopen = false;
                    window.scrollTo(0, document.documentElement.scrollHeight);
                });
            },
            send: function (event) {
                if (event.keyCode == 13 && event.target.value.length > 0) {
                    mview.socket.send({
                        data: {
                            method: "FRIEND_RELATION_SEND",
                            revcid: pagedata.data.bag.friendid,
                            revctype: 1,
                            style: 1,
                            content: event.target.value
                        },
                        success: function (data) {
                            if (data.Code != 0) {
                                mview.control.tips(data.Message);
                            }
                        }
                    });
                    //填充内容
                    pagedata.methods.messagepush({
                        id: 0,
                        sendid: pagedata.data.bag.memberid,
                        revcid : pagedata.data.bag.friendid,
                        revctype : 1,
                        style : 1,
                        content : event.target.value,
                        addtime: m.date().toFormat("yyyy-MM-dd hh:mm:ss")
                    });
                    event.target.value = "";
                    pagedata.data.funcopen = false;
                    pagedata.data.faceopen = false;
                    window.scrollTo(0, document.documentElement.scrollHeight);
                }
            },
            detail: function (id) {
                mview.view.load('/views/module/friend/detail.html', {
                    id: id
                });
            },
            facesend: function (id) {
                var content = m.view.node('#meeesgetext').value();
                content += "{FS}" + id + "{FE}";
                m.view.node('#meeesgetext').value(content);
            },
            face: function () {
                pagedata.data.funcopen = false;
                pagedata.data.faceopen = !pagedata.data.faceopen;
            },
            func: function () {
                pagedata.data.faceopen = false;
                pagedata.data.funcopen = !pagedata.data.funcopen;
            }
        }
    }
    mview.view.chlid.init(pagedata);
</script>